/*
  学习目标：使用react-redux连接库，简化redux在React中的使用
  1.npm i react-redux
  2.在 react-redux 导入 Provider 组件，按照文档配置<Provider store={store}><App /></Provider>
    这样其他组件都能够和 store 进行交互
  3.通过 useSelector 获取state
      语法： useSelect(函数)
      注意：💥useSelector在源码内部处理了state.count的监听，并且同步给React，让Reacg驱动视图
  4.通过 useDispatch，获取dispatch，触发dispatch
*/

import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addAction, desAction } from './store';

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show ? <Son /> : null}
    </div>
  );
}
function Son() {
  // 2.通过useSelector 获取state
  // 语法：useSelector(函数)
  // 优化：需要用到什么数据，就解构什么数据即可
  // 注意：💥useSelector在源码内部创建了当前组件Son的状态，并且和全局store关联起来
  const { count, msg, list } = useSelector((state) => state);
  console.log('count----->', count, msg, list);
  // 3. 通过 useDispatch() ，返回 dispatch，触发dispatch
  const dispatch = useDispatch();
  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      {/* Action对象中，使用payload传参； 👍推荐使用payload作为参数的键名  */}
      {/* 使用actionCreator减少代码，增加代码提示 */}
      <button onClick={() => dispatch(addAction(1))}>+1</button>
      <button onClick={() => dispatch(desAction(5))}>+5</button>
      <button onClick={() => dispatch(desAction(1))}>-1</button>
      <button onClick={() => dispatch(desAction(5))}>-5</button>
    </div>
  );
}
